<template>
  <div class="container pos-rel">
    <template v-if="!getCustomerId">
      <get-phone-info v-if="isGetPhoneInfo"></get-phone-info>
      <get-user-info v-if="isGetUserInfo" pageType="personal" @authPhoneInfo="authPhoneInfo"></get-user-info>
    </template>
    <template v-if="getCustomerId && !getPhone">
      <get-phone-info v-if="isGetPhoneInfo"></get-phone-info>
    </template>
    <div class="tips-t pad-t-10 pad-b-10 pad-l-12">
      <div class="flex v-align-c div-input mar-t--10 mar-b--10">
        <div class="form-l">直播列表</div>
        <div class="flex-item">
          <div class="flex float-r">
            <div class="address-textarea font-14 mar-t-10 mar-r-10">
            </div>
            <div class="select-local flex v-align-c" @click="showLiveStatusPicker">
              <label class="flex-item">{{pickLiveStatusText}}</label>
              <icon class="iconfont icon-arrow-right icon-arrow-down font-color-6"></icon>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="height-48"></div>
    <ul :class="'live-type-' + liveStyle.showType">
      <li v-for="(item, index) in liveData" :key="index"
        @click="liveTo(item.roomid)" :class="'live-style-' + liveStyle.showStyle">
        <div :class="'live-type-' + liveStyle.showType">
          <div class="list-item" :class="'live-style-' + liveStyle.showStyle">
            <div class="live-bar" :class="'live-type-' + liveStyle.showType">
              <div class="live-bar-l">
                <div class="live-status font-12 font-white">
                  <div v-if="item.live_status === 101" class="flex v-align-c live-active">
                    <img v-if="fileSpace" :src="fileSpace + '/images/icon_point.png'" alt="" class="width-6 height-6 mar-r-2">
                    <label>正在直播</label>
                  </div>
                  <div v-else-if="item.live_status === 102">
                    {{ item.start_time }}<span>开播</span>
                  </div>
                  <div v-else>
                    <span>回放</span>
                  </div>
                </div>
                <img :src="liveStyle.showType === '12' ? item.cover_img : item.share_img + '?imageView2/1/w/690/h/690'"
                  class="cover-img" mode="aspectFill"/>
                <div class="live-name hide-style-3">{{ item.name }}</div>
                <div class="live-bar-3 show-style-3">
                  <div class="names">{{ item.name }}</div>
                  <div class="flex v-align-c infos" @click="liveTo(item.roomId)">
                    <div class="name-line flex v-align-c">
                      <i class="pad-r-5">主播: </i>
                      <span class="flex-item">{{ item.anchor_name }}</span>
                    </div>
                    <div class="flex-item"></div>
                    <button size="mini" class="mini-btn share-btn"
                      @click.stop.prevent="$pt.navigateTo({url: '/pages/home/live-share/main?roomid=' + item.roomid})">分享</button>
                  </div>
                </div>
              </div>
              <div class="live-bar-r">
                <div class="live-name">{{ item.name }}</div>
                <div class="goods-info flex" v-if="item.goods.length">
                  <span>
                    <img :src="item.minCover_img" class="goods-img width-48 height-48" mode="aspectFill"/>
                    <i>
                      <u>￥</u>
                      <em>{{ item.minPrice }}</em>
                    </i>
                  </span>
                  <div class="goods-num width-48 height-48 flex flex-center">
                    <div class="font-12">
                      <p>{{ item.goods.length }}件</p>
                      <p>宝贝</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex v-align-c pad-t-10 hide-style-3">
              <div class="font-13 font-w"><span v-if="liveStyle.showType !== '10'">主播: </span>{{ item.anchor_name }}</div>
              <div v-if="item.goods.length && liveStyle.showType === '10'" class="font-12 font-color-6"> &nbsp;&nbsp; | &nbsp; 商品：{{ item.goods.length }}</div>
              <div class="flex-item"></div>
              <button size="mini" :style="'background-color: '+globalStyle.color2+';'" class="mini-btn share-btn" @click.stop.prevent="$pt.navigateTo({url: '/pages/home/live-share/main?roomid=' + item.roomid})">分享</button>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <!-- 暂无数据 -->
    <div class="category-nodata" v-if="liveNull">
      <img v-if="fileSpace" :src="fileSpace + '/images/shop-nodata.png'" class="width-375 height-91" alt="">
      <div class="align-c mar-t-5 font-16 font-color-6">
        暂无数据~
      </div>
    </div>
    <van-popup
            :show="isShowLiveStatusPicker"
            position="bottom"
            @close="onLiveStatusClose">
      <van-picker
              show-toolbar
              :columns="pickerLiveStatusArray"
              @cancel="onLiveStatusClose"
              @confirm="onLiveStatusConfirm"/>
    </van-popup>
  </div>
</template>

<script>
  import { getMemberInfo, getWechatLiveBroadcast, getLiveStyle } from '@/api/home'
  import GetUserInfo from '@/components/GetUserInfo'
  import GetPhoneInfo from '@/components/GetPhoneInfo'
  export default {
    components: { GetUserInfo, GetPhoneInfo },
    data() {
      return {
        isShowLiveStatusPicker: false,
        pickerLiveStatusArray: [{
          text: '全部直播',
          value: ''
        }, {
          text: '直播中',
          value: 101
        }, {
          text: '预直播',
          value: 102
        }, {
          text: '已结束',
          value: 103
        }],
        pickLiveStatus: '',
        pickLiveStatusText: '全部直播',
        memberInfo: {},
        liveData: [],
        listQuery: {
          memberId: '',
          currentPage: 1,
          size: 8
        },
        currentPage: 0,
        pullLoad: {
          loading: false,
          finished: false
        },
        liveStyle: {},
        liveNull: false,
        globalStyle: {},
        isGetPhoneInfo: false,
        isGetUserInfo: false
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    mounted() {
      let getAppInfo = this.$pt.getStorageSync('appInfo')
      this.globalStyle = getAppInfo.style
      this.$utils.showToast({
        title: '数据加载中',
        icon: 'loading'
      })
      this.liveData = []
      this.currentPage = 0
      this.pullLoad.finished = false
      this.initMemberInfo()
      this.liveList()
    },
    onPullDownRefresh() {
      this.$utils.showToast({
        title: '数据加载中',
        icon: 'loading'
      })
      this.liveData = []
      this.currentPage = 0
      this.pullLoad.finished = false
      this.liveList()
      setTimeout(() => {
        this.$pt.stopPullDownRefresh()
      }, 500)
    },
    onReachBottom() {
      // 触底刷新
      if (!this.pullLoad.finished) {
        this.liveList()
      }
    },
    methods: {
      // 会员基本信息
      initMemberInfo() {
        getMemberInfo(this.getMemberId).then((response) => {
          if (response.isError) return
          this.memberInfo = response.data
        }).catch(() => {
        })
      },
      authPhoneInfo() {
        this.isGetPhoneInfo = true
      },
      liveTo(roomid) {
        if (this.getCustomerId) {
          if (this.getPhone) {
            let customParams = {
              liveShareMemberId: this.getMemberId,
              liveShareCustomerId: this.getCustomerId
            }
            this.$pt.navigateTo({
              url: 'plugin-private://' + process.env.LIVE_ID + '/pages/live-player-plugin?room_id=' + roomid +
           '&custom_params=' + encodeURIComponent(JSON.stringify(customParams))
            })
          } else {
            this.isGetPhoneInfo = true
          }
        } else {
          this.isGetUserInfo = true
        }
      },
      liveList() {
        if (!this.getMemberId) return
        getLiveStyle().then((response) => {
          if (response.isError) return
          this.liveStyle = response.data
        }).catch(() => {
        })
        getWechatLiveBroadcast({
          memberId: this.getMemberId,
          liveStatus: this.pickLiveStatus,
          currentPage: this.currentPage,
          size: 5
        }).then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          let priceArr = []
          if (response.data.records.length !== 0) {
            this.liveNull = false
            response.data.records.forEach(item => {
              if (item.goods) {
                item.goodsNum = item.goods.length
              }
              if (item.start_time) {
                item.start_time = this.$utils.formatTimeToMD(item.start_time * 1000)
              }
              if (item.goods) {
                item.goods.forEach(itemGoods => {
                  priceArr.push(Number(itemGoods.price))
                })
                item.minPrice = (Math.round(Math.min.apply(null, priceArr) * 100) / 100).toFixed(2)
                item.minPriceShort = String(Math.round(Math.min.apply(null, priceArr) * 100) / 100)
                item.goods.forEach(itemLessGoods => {
                  if (itemLessGoods.price === item.minPriceShort) {
                    item.minCover_img = itemLessGoods.cover_img
                  }
                })
              }
              this.liveData.push(item)
            })
            this.currentPage++
            if (this.liveData.length === 0 || this.liveData.length >= response.data.total) {
              this.pullLoad.finished = true
            }
          } else {
            this.liveNull = true
          }
        }).catch(() => {
        })
      },
      showLiveStatusPicker() {
        console.log('showLiveStatusPicker')
        this.isShowLiveStatusPicker = true
      },
      onLiveStatusClose() {
        this.isShowLiveStatusPicker = false
        this.$pt.hideToast()
      },
      onLiveStatusConfirm(e) {
        this.isShowLiveStatusPicker = false
        this.$pt.hideToast()
        this.pickLiveStatus = e.mp.detail.value.value
        this.pickLiveStatusText = e.mp.detail.value.text
        this.liveData = []
        this.currentPage = 0
        this.liveList()
      }
    }
  }
</script>

<style lang="less" scoped>
  .category-nodata{
    margin-top: 80px;
    .goSetting{
      margin-top: 60px;
      button{
        width: 133px;
        height: 33px;
        background: #333333;
        line-height: 33px;
        padding: 0;
        color: white;
        font-size: 15px;
      }
    }
  }
  .tips-t{
    background: #fff;
    margin-bottom: 5px;
    border-top: #f5f5f5 1px solid;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
    box-shadow:0px 1px 8px rgba(142, 142, 142, 0.2);
  }
  .select-local{
    border: #9e9e9e 1px solid;
    border-radius: 100px;
    padding: 5px 6px;
    label{
      font-size: 12px;
      display: block;
      width: 50px;
      margin-left: 5px;
    }
  }
  .div-input {
    border-bottom: #e5e5e5 1px solid;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 20px;
  }
  .div-input:last-child {
    border-bottom: 0;
  }
  .icon-arrow-down {
    transform: rotate(90deg);
  }
  .container{
    background: #fff;
    min-height: 100vh;
    ul{
      padding-top: 12px;
      padding-bottom: 12px;
      &:after{
        content: '';
        display: block;
        clear: both;
      }
      &.live-type-12{
        padding: 15px 15px!important;
        li{
          background: none!important;
          border-bottom: none!important;
          padding: 0px!important;
          float: left;
          &:nth-child(even){
            float: right;
          }
          .list-item{
            &.live-style-10{
              box-shadow: 0 0 19px rgba(172,172,172,0.28);
              padding: 0px!important;
              border-radius: 8px;
              .cover-img{
                box-shadow:0px 1px 8px rgba(156, 156, 156, 0.35);
              }
            }
            &.live-style-11{
              border: none!important;
              background: none!important;
              padding: 0px!important;
              border-radius: 8px;
              .cover-img{
                box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
              }
            }
          }
        }
      }
      li{
        padding: 20px 15px;
        background: #fff;
        margin-bottom: 16px;
        &:last-child{
          margin-bottom: 0px;
        }
        &.live-style-10, &.live-style-11{
          background: none;
          padding: 0px 15px;
        }
        &.live-style-12{
          border-bottom: #f4f4f4 5px solid;
          padding: 4px 15px 20px 15px;
          &:last-child{
            margin-bottom: -12px;
          }
        }
        .live-style-10{
          box-shadow: 0 0 19px rgba(172,172,172,0.28);
          padding: 10px;
          border-radius: 8px;
        }
        .live-style-11{
          border: #eeeeee 1px solid;
          background: #fff;
          padding: 10px;
          border-radius: 8px;
        }
        .share-btn{
          background-color: #ffe103;
          color: #333;
          padding: 0 19px;
          font-size: 12px;
        }
        .live-bar{
          position: relative;
          z-index: 2;
          &:before{
            content: '';
            display: block;
            border-style: solid;
            border-color: #000000 transparent transparent transparent;
            position: absolute;
            left: -6px;
            top: 30px;
            border-width: 3px 0 0 6px;
            z-index: 5;
          }  
          .live-status{
            position: absolute;
            left: -6px;
            top: 10px;
            background: #222222;
            padding: 0 10px 0 8px;
            height: 20px;
            line-height: 20px;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;  
            z-index: 2;      
          }
          .live-active{
            color: #e6cc00;
          }
          .cover-img{
            width: 100%;
            height: 185px;
            border-top-left-radius: 0;
            border-top-right-radius: 8px;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
          }
          .live-name{
            position: absolute;
            left: 0;
            bottom: 0;
            color: #fff;
            padding: 0 12px;
            font-size: 15px;
            font-weight: bold;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            box-sizing: border-box;
            width: 100%;
            height: 42px;
            line-height: 42px;
            overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;
            -webkit-line-clamp:1;
            -webkit-box-orient:vertical;
            word-break:break-word;
          }
          &.live-type-10{
            .live-bar-r{
              display: none;
            }
          }
          &.live-type-11{
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            .cover-img{
              width: 168px;
              height: 163px;
              border-top-left-radius: 4px;
              border-top-right-radius: 0px;
              border-bottom-left-radius: 4px;
              border-bottom-right-radius: 0px;
            }
            .live-bar-l{
              -webkit-box-flex: 1;
              -webkit-flex: 1;
              flex: 1;
              .live-name{
                display: none;
              }
            }
            .live-bar-r{
              -webkit-box-flex: 1;
              -webkit-flex: 1;
              flex: 1;
              padding: 0 7px;
              .live-name{
                position: relative;
                left: 0;
                top: 0;
                color: #333;
                padding: 0;
                font-size: 15px;
                margin-top: 3px;
                font-weight: bold;
                background: none;
                border-bottom-left-radius: 0px;
                border-bottom-right-radius: 0px;
                box-sizing: border-box;
                width: 100%;
                height: 37px;
                line-height: 1.2;
                overflow:hidden;
                text-overflow:ellipsis;
                display:-webkit-box;
                -webkit-line-clamp:2;
                -webkit-box-orient:vertical;
                word-break:break-word;
              }
              .goods-info{
                padding-top: 75px;
                span{
                  position: relative;
                  border-radius: 3px;
                  display: inline-block;
                  overflow: hidden;
                  i{
                    u{
                      font-size: 9px;
                      display: inline-block;
                      position: absolute;
                      left: 0;
                      bottom: 0;
                    }
                    em{
                      display: inline-block;
                      width: 36px;
                      margin-left: 7px;
                      height: 16px;
                      font-size: 11px;
                      overflow:hidden;
                      text-overflow:ellipsis;
                      display:-webkit-box;
                      -webkit-line-clamp:1;
                      -webkit-box-orient:vertical;
                      word-break:break-word;
                    }
                    display: block;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    z-index: 20;
                    width: 100%;
                    height: 16px;
                    font-size: 11px;
                    padding-left: 2px;
                    box-sizing: border-box;
                    color: #fff;
                    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
                  }
                }
                .goods-num{
                  border-radius: 3px;
                  margin-left: 8px;
                  background: #edeaeb;
                  color: #999;
                  text-align: center;
                  overflow: hidden;
                }
              }      
            }
          }
          &.live-type-12{
            .live-bar-r{
              display: none;
            }
          }
        }        
        .live-type-10{
          .show-style-3{
            display: none;
          }
        }
        .live-type-11{
          .show-style-3{
            display: none;
          }
        }
        .live-type-12{
          .hide-style-3{
            display: none;
          }
          .cover-img{
            width: 168px;
            height: 284px;
            border-radius: 5px;
          }
          .live-bar-3{
            position: absolute;
            left: 0;
            bottom: 0;
            color: #fff;
            padding: 0 6px 6px 6px;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            box-sizing: border-box;
            width: 168px;  
            .names{
              font-size: 13px;
              height: 22px;
              line-height: 22px;
              overflow:hidden;
              text-overflow:ellipsis;
              display:-webkit-box;
              -webkit-line-clamp:1;
              -webkit-box-orient:vertical;
              word-break:break-word;
              text-shadow: 2x 2px 4px rgba(0, 0, 0, 0.5);
            }
            .infos{
              font-size: 12px;
              .name-line{
                i{
                  display: block;
                  height: 20px;
                  line-height: 20px;
                }
                span{
                  width: 65px;
                  height: 20px;
                  line-height: 20px;
                  display: block;
                  overflow:hidden;
                  text-overflow:ellipsis;
                  display:-webkit-box;
                  -webkit-line-clamp:1;
                  -webkit-box-orient:vertical;
                  word-break:break-word;
                  }
              }
              .share-btn{
                padding: 0 14px;
                font-size: 10px;
              }
            }
          }
        }        
        .live-avatar{
          border-radius: 100px;
        }
      }
    }
  }
</style>
